<!-- CateModal.vue -->
<template>
  <div class="dialog-overlay" :class="{'active': overlayActive}" @click.self="close">
    <!-- 云朵背景 -->
    <div class="cloud cloud-1"></div>
    <div class="cloud cloud-2"></div>
    <div class="cloud cloud-3"></div>
    
    <!-- 主弹窗内容 -->
    <div class="dialog-content" :class="{'bounce-in': animate}">
      <!-- 标题栏 -->
      <div class="dialog-header">
        <div class="dialog-title">
          <h2>新增服务类型</h2>
          <div class="title-underline"></div>
        </div>
        <button class="close-btn" @click="close">
          <i class="iconfont icon-close"></i>
        </button>
      </div>
      
      <!-- 内容区域 -->
      <div class="dialog-body">
        <div class="form-group">
          <label>
            <i class="iconfont icon-edit"></i>
            类型名称
          </label>
          <input 
            v-model="formData.name" 
            type="text" 
            placeholder="请输入服务类型名称"
            class="form-input"
          >
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-sort"></i>
              排序值
            </label>
            <input 
              v-model="formData.sort_order" 
              type="number"
              placeholder="0"
              class="form-input"
            >
          </div>
          
          <div class="form-group">
            <label>
              <i class="iconfont icon-status"></i>
              状态
            </label>
            <div class="radio-group">
              <button
                class="radio-item"
                :class="{ active: formData.status === '1' }"
                @click="formData.status = '1'"
              >
                启用
              </button>
              <button
                class="radio-item"
                :class="{ active: formData.status === '0' }"
                @click="formData.status = '0'"
              >
                禁用
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作栏 -->
      <div class="dialog-footer">
        <button class="btn cancel-btn" @click="close">
          <i class="iconfont icon-arrow-left"></i>
          <span class="btn-text">取消</span>
        </button>
        <button 
          class="btn submit-btn" 
          @click="save"
          :disabled="isSaving"
        >
          <i class="iconfont icon-correct"></i>
          <span class="btn-text">{{ isSaving ? '保存中...' : '确认新增' }}</span>
        </button>
      </div>
    </div>
    
    <!-- 装饰元素 -->
    <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
    <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
    <div class="decoration star-3"><i class="iconfont icon-star"></i></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const emit = defineEmits(['save', 'close'])

const animate = ref(false)
const overlayActive = ref(false)
const isSaving = ref(false)
const formData = ref({
  name: '',
  sort_order: '0',
  status: '1' // 默认启用
})

// 重置表单
const resetForm = () => {
  formData.value = {
    name: '',
    sort_order: '0',
    status: '1'
  }
}

// 打开弹窗方法（供父组件调用）
const open = () => {
  animate.value = true
  setTimeout(() => {
    overlayActive.value = true
  }, 50)
}

// 关闭弹窗
const close = () => {
  animate.value = false
  overlayActive.value = false
  setTimeout(() => emit('close'), 350)
}

// 保存操作
const save = () => {
  if (!formData.value.name) {
    vToast({ message: "请填写服务类型名称" })
    return
  }
  
  if (isNaN(formData.value.sort_order)) {
    vToast({ message: "排序值必须是数字" })
    return
  }
  
  isSaving.value = true
  
  // 发送数据到父组件
  emit('save', {
    name: formData.value.name,
    sort_order: parseInt(formData.value.sort_order),
    status: formData.value.status
  })
}

// 暴露方法给父组件
defineExpose({ open, resetForm })

onMounted(() => {
  // 初始化时打开
  open()
})
</script>

<style scoped lang="less">
/* 保持与原有样式一致 */
@import url(@/assets/css/dialog.css);
</style>